<template>
	<view class="page-container">
		<!-- 头部背景 - 移除波浪图，改为静态渐变色 -->
		<view class="profile-header">
			<view class="user-info-card" @click="handLogin">
				<image :src="avatarUrl" class="cu-avatar xl round shadow-blur"></image>
				<view class="user-info">
					<view class="text-xl text-bold text-white">{{ isLoggedIn ? username : '点击登录' }}</view>
					<view class="text-sm text-white">{{ isLoggedIn ? `绑定手机: ${phone}` : '登录后可查看更多信息' }}</view>
				</view>
			</view>
		</view>

		<!-- 我的订单 -->
		<view class="card-wrapper">
			<view class="cu-card">
				<view class="cu-item shadow">
					<view class="cu-list menu">
						<view class="cu-item">
							<view class="content">
								<text class="cuIcon-formfill text-orange"></text>
								<text class="text-grey text-bold">我的订单</text>
							</view>
							<view class="action" @click="navigateToOrderList('all')">
								<text class="text-sm text-gray">查看全部</text>
								<text class="cuIcon-right"></text>
							</view>
						</view>
					</view>
					<!-- 强制横向排列 -->
					<view class="flex justify-around padding-tb">
						<view class="text-center" @click="navigateToOrderList('pending_payment')">
							<view class="cuIcon-pay text-red icon-lg"></view>
							<view>待付款</view>
						</view>
						<view class="text-center" @click="navigateToOrderList('pending_receipt')">
							<view class="cuIcon-deliver text-blue icon-lg"></view>
							<view>待收货</view>
						</view>
						<view class="text-center" @click="navigateToOrderList('completed')">
							<view class="cuIcon-check text-green icon-lg"></view>
							<view>已完成</view>
						</view>
						<view class="text-center" @click="navigateToOrderList('after_sales')">
							<view class="cuIcon-refund text-brown icon-lg"></view>
							<view>退款/售后</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	
		<!-- 服务列表 -->
<view class="card-wrapper">
  <view class="cu-list menu card-menu shadow">
    <view class="cu-item arrow" v-for="(item, index) in funcList" :key="index" @click="handleNavigate(item.path)">
      <!-- 修改 content 的样式，让图标和文字左侧对齐 -->
      <view class="content" style="display: flex; flex-direction: row; align-items: center;"> 
        <view class="cu-avatar round sm" :class="item.bgColor">
          <text :class="'cuIcon-' + item.icon"></text>
        </view>
        <text class="margin-left-sm">{{ item.text }}</text>
      </view>
    </view>
  </view>
</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { routerGuard } from '@/utils/permission';

onMounted(async () => {
	try {
		await routerGuard();
	} catch (error) {
		uni.showModal({
			title: '登录提示',
			content: error === '登录状态已过期' ? '您的登录状态已过期，请重新登录' : '您还未登录，请登录后继续操作',
			confirmText: '前往登录',
			cancelText: '稍后再说',
			success: (res) => {
				if (res.confirm) {
					uni.navigateTo({ url: '/pages/login/login' });
				}
			},
		});
	}
});

onShow(() => {
	checkLoginStatus();
});

const isLoggedIn = ref(false);
const username = ref('');
const phone = ref('');
const subPhone = ref('');
const avatarUrl = ref('/static/cangshu.png'); // Default avatar

const checkLoginStatus = () => {
	const token = uni.getStorageSync('token');
	isLoggedIn.value = !!token;

	if (isLoggedIn.value) {
		const storedUser = uni.getStorageSync('user');
		if (storedUser) {
			try {
				const userInfo = JSON.parse(storedUser);
				username.value = userInfo.userName || '未设置用户名';
				phone.value = formatPhoneNumber(userInfo.phone || '');
				avatarUrl.value = userInfo.avatar || '/static/user/touxiang.png';
			} catch (e) {
				console.error("解析用户信息失败", e);
				// 解析失败，回到未登录状态
				isLoggedIn.value = false;
				username.value = '点击登录';
				phone.value = '';
				avatarUrl.value = '/static/cangshu.png';
			}
		} else {
			// 存储中没有user，也视为未登录
			isLoggedIn.value = false;
			username.value = '点击登录';
			phone.value = '';
			avatarUrl.value = '/static/cangshu.png';
		}
	} else {
		username.value = '点击登录';
		phone.value = '';
		avatarUrl.value = '/static/cangshu.png';
	}
};

const formatPhoneNumber = (phone) => {
	if (!phone) return '';
	return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
};

const funcList = ref([
	{ icon: 'map', text: '收货地址', path: '/pages/address/index', bgColor: 'bg-orange' },
	{ icon: 'favor', text: '我的收藏', path: '/pages/favorite/favorite', bgColor: 'bg-red' },
	{ icon: 'ticket', text: '我的卡券', path: '/pages/index/myCard', bgColor: 'bg-yellow' },
	{ icon: 'settings', text: '设置', path: '/pages/setting/setting', bgColor: 'bg-grey' },
]);

const navigateToOrderList = (status) => {
	if (!isLoggedIn.value) {
		uni.navigateTo({ url: '/pages/login/login' });
		return;
	}
	// 携带状态参数跳转到订单列表页
	uni.navigateTo({ url: `/pages/order/list?status=${status}` });
}

const handleNavigate = (path) => {
	if (!isLoggedIn.value) {
		uni.navigateTo({ url: '/pages/login/login' });
		return;
	}
	uni.navigateTo({ url: path });
};

const handLogin = () => {
	if (!isLoggedIn.value) {
		uni.navigateTo({ url: '/pages/login/login' });
	}
};
</script>

<style scoped>
.page-container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 20rpx;
}

/* 头部背景 - 使用渐变代替波浪图 */
.profile-header {
	background: linear-gradient(to right, #d0d7e7, #adbde4); /* 渐变背景 */
	height: 220rpx; /* 降低高度，更符合设计 */
	display: flex;
	align-items: center;
	position: relative;
	color: #fff;
	padding: 0 30rpx;
}

/* 用户信息卡片 - 改为透明背景 */
.user-info-card {
	display: flex;
	align-items: center;
	z-index: 1; /* 确保文字在背景之上 */
	width: 100%;
	background-color: transparent; /* 移除卡片背景色 */
	padding: 30rpx 0;
}

/* 移除波浪图 */
.gif-wave {
	display: none;
}

/* 用户信息样式调整 */
.user-info {
	margin-left: 30rpx;
	flex: 1;
}
.text-white {
	color: #fff;
	text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1); /* 添加文字阴影提高可读性 */
}
.user-info .text-sm {
	margin-top: 8rpx;
	opacity: 0.9;
}

.card-wrapper {
	padding: 0 15rpx;
	margin-top: -50rpx; /* 调整上边距，贴近头像 */
	position: relative;
	z-index: 2;
	margin-bottom: 25rpx;
}

.icon-lg {
	font-size: 64rpx;
	margin-bottom: 10rpx;
}
.cu-list.menu.card-menu > .cu-item {
	min-height: 120rpx; /* 增加服务列表行高 */
}
.cu-list.menu > .cu-item .content .cu-avatar {
	color: #ffffff;
}
</style>